[NodeJS] ajax에서 post, patch 요청시 nodejs express에서 request body를 못 가져오는 이슈 해결

Last Modified : 2022-06-30 / Created : 2022-06-30

3,463
View Count

주소 복사하기

Front 앱에서 axios를 사용하여 파라미터를 Body에 담아 서버에 전달하였습니다. 특별한 설정은 없으며 매우 단순합니다. 당연히 잘 동작할거라 생각했었지만 결과는 참담하게도 아무 값도 얻어오지 못했습니다.

# Express Node 서버에서 body를 못가져오는 경우

body가 아니라 다른데로 넘어오나? 메소드 문제인가? get, post, patch로 바꾸어보고 request의 query, params, body 모두 찾아보아도 빈 값으로만 전달됩니다. 아 ~ query string으로 전달하는 경우에만 res.query로 잘 전달되는 이상한 문제입니다.

! 이슈 확인 후 문제 해결을 위해 검색

뭐가 문제일까요? 수 많은 문서를 찾아봤으나 대부분 ajax, axios 설정 또는 nodejs express의 예제 코드 들이 대부분입니다. 여러가지 시도를 해보았고 header의 body 포맷이나 encoding 설정을 바꾸어도 결과는 동일했습니다. 모두 빈 값으로 들어옵니다.

아무리 생각해도 안될 이유가 없습니다... 좀 더 검색해보니 특정 검색 페이지에서 결국 원인을 파악하게 되었습니다. 원인은 생각보다 간단했는데 nodejs의 express에서 body를 parsing하는 기능이 없어 값을 전달할 수 없는 것이 원인이었습니다. 전혀 생각하지 못했던 부분이었죠.

! express의 body parsing 해결 방법

가장 간단한 해결방법은 Body parsing을 설치하는 방법입니다. npm의 body-parser를 찾아 설치하면 제일 쉽고 간단합니다. 아래와 같이 설치 후 설정하도록 합니다.

npm install body-parser

설치가 끝났다면 아래와 같이 express에 bodyParser를 설정합니다.

const express = require('express')
const bodyParser = require('body-parser')

const app = express()
app.use(bodyParser.json())

모든 과정이 끝났습니다. 위의 코드는 content-type이 application/json인 경우입니다. application/x-www-form-urlencoded인 경우 아래와 같이 설정 값을 추가하거나 변경하도록 합니다.

// application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

위와 같이 변경한 후 테스트를 진행해봐야죠 ~ 간단한 예제를 만들고 Front app에서 ajax를 서버에 요청해봅니다.
예제 코드는 다음과 같습니다.

const options = {
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
}

try {
const result = await axios.post(url, { title: 'abc' }, options)
// 성공시 코드
} catch(e) {
// Error handling
}

위 코드를 동작하고 NodeJS Express에서 결과를 console에서 확인해보았습니다. 예상대로 잘 동작합니다.

router.use('/test', function(req, res) {
console.log(req.body)
})

// Result
{
title: 'abc'
}

다행히 간단하게 해결할 수 있었습니다. 운이 좋아서 원인을 빨리 파악했지만 만약 원인 파악이 늦어졌다면 굉장히 시달렸을 이슈사항입니다.

여기까지 NodeJS Express에서의 body 파라미터 관련 해결 방법이었습니다.

아래의 글도 찾고 계시지 않나요?

[자바스크립트] 배열처럼 사용하는 set 알아보기

자바스크립트 Array 스태틱 메소드 from() 알아보기